<!DOCTYPE html>
<!-- saved from url=(0025)http://markdown.pioul.fr/ -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>Create blog</title>
    <meta name="description"
          content="This is the simplest and slickest online Markdown editor. Just write Markdown and see what it looks like as you type. And convert it to HTML in one click.">
    <link rel="shortcut icon" href="http://markdown.pioul.fr/favicon.ico" type="image/x-icon">
    <meta property="og:image" content="http://markdown.pioul.fr/images/markdown.png">

    <link id="theme-default" href="/static/bundle-light-theme-a23557fd.css" rel="stylesheet" type="text/css">

    <link id="theme" href="/static/bundle-light-theme-a23557fd.css" rel="stylesheet" type="text/css">

    <link id="theme-light-ref" data-href="/static/bundle-light-theme-a23557fd.css" rel="stylesheet" type="text/css">

    <link id="theme-dark-ref" data-href="/static/bundle-dark-theme-f217d64d.css" rel="stylesheet" type="text/css">


    <script type="text/javascript" async="" src="/static/ga.js"></script>
    <script src="/static/jquery.min.js"></script>

    <script src="/static/all-fecafa1e.js"></script>

</head>
<body class="clearfix" style="opacity: 1;background: #cce8cf">
<form action="" method="post">
    <div id="left-column">
        <div id="top_panels_container">
            <div class="top_panel" id="title">
                <div class="close">×</div>
                Title:{{ form.title }}
                tags: {{ form.tags }}
                <input class="title mousetrap" name="note_name" type="submit" id="note_title">
            </div>
            <div class="top_panel" id="quick-reference">
                <div class="close">×</div>

                <h2>Quick Reference</h2>

                <table>
                    <tbody>
                    <tr>
                        <td>
                        <pre><code><span class="highlight">*</span>This is italicized<span class="highlight">*</span>,
                            <wbr>
                            and <span class="highlight">**</span>this is bold<span
                                    class="highlight">**</span>.</code></pre>
                        </td>
                        <td><p>Use <code>*</code> or <code>_</code> for emphasis.</p></td>
                    </tr>
                    <tr>
                        <td>
                            <pre><code><span class="highlight">#</span> This is a first level header</code></pre>
                        </td>
                        <td><p>Use one or more hash marks for headers: <code>#&nbsp;H1</code>, <code>##&nbsp;H2</code>,
                            <code>###&nbsp;H3</code>…</p></td>
                    </tr>
                    <tr>
                        <td>
                        <pre><code>This is a link to
                            <wbr>
                            <span class="highlight">[Google](http://www.google.com)</span></code></pre>
                        </td>
                        <td><p></p></td>
                    </tr>
                    <tr>
                        <td>
								<pre><code>First line.<span class="highlight">  </span>
                                    Second line.</code></pre>
                        </td>
                        <td><p>End a line with two spaces for a linebreak.</p></td>
                    </tr>
                    <tr>
                        <td>
								<pre><code><span class="highlight">- </span>Unordered list item
                                    <span class="highlight">- </span>Unordered list item</code></pre>
                        </td>
                        <td><p>Unordered (bulleted) lists use asterisks, pluses, or hyphens (<code>*</code>,
                            <code>+</code>,
                            or <code>-</code>) as list markers.</p></td>
                    </tr>
                    <tr>
                        <td>
								<pre><code><span class="highlight">1. </span>Ordered list item
                                    <span class="highlight">2. </span>Ordered list item</code></pre>
                        </td>
                        <td><p>Ordered (numbered) lists use regular numbers, followed by periods, as list markers.</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <pre><code><span class="highlight">    </span>/* This is a code block */</code></pre>
                        </td>
                        <td><p>Indent four spaces for a preformatted block.</p></td>
                    </tr>
                    <tr>
                        <td>
                            <pre><code>Let's talk about <span class="highlight">`</span>&lt;html&gt;<span
                                    class="highlight">`</span>!</code></pre>
                        </td>
                        <td><p>Use backticks for inline code.</p></td>
                    </tr>
                    <tr>
                        <td>
                            <pre><code><span
                                    class="highlight">![](http://w3.org/Icons/valid-xhtml10)</span></code></pre>
                        </td>
                        <td><p>img src="filepaht" style="width:500px;height: 300px"</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="top_panel" id="about">
                <div class="close">×</div>
                {{ form.media }}
                {{ form.uploads }}
                {% csrf_token %}
                <script>
                    CKEDITOR.replace('uploads', {
                        filebrowserBrowseUrl: '/ckeditor/browse/',
                        filebrowserUploadUrl: '/ckeditor/upload/',
                        height: 50,
                        width: 400,
                        startupOutlineBlocks: 'True',
                        toolbar: [['Link']]
                    });
                </script>
            </div>

            <div class="top_panel" id="settings">
                <div class="close">×</div>

                <h2>Settings</h2>

                <p>
                    <label>Text size</label>
                    <a href="http://markdown.pioul.fr/#" class="button" id="decrease-font-size"></a>
                    <a href="http://markdown.pioul.fr/#" class="button" id="increase-font-size"></a>
                </p>

                <p>
                    <label>Theme</label>
						<span class="theme-control theme-control-dark">
							Light
							<a href="http://markdown.pioul.fr/#" class="button" id="use-dark-theme">Change to Dark
                                Theme</a>
						</span>
						<span class="theme-control theme-control-light">
							Dark
							<a href="http://markdown.pioul.fr/#" class="button" id="use-light-theme">Change to Light
                                Theme</a>
						</span>
                </p>

                <h2>Shortcuts</h2>

                <ul>
                    <li><kbd>Ctrl</kbd> + <kbd>+</kbd> to increase the text size</li>
                    <li><kbd>Ctrl</kbd> + <kbd>-</kbd> to decrease the text size</li>
                </ul>

                <h3>Shortcuts on Mac</h3>

                <p>On Mac, replace <kbd>Ctrl</kbd> with <kbd>⌘</kbd> (the command key) in the shortcuts above.</p>
            </div>
        </div>
        <div class="wrapper">
            <div class="topbar hidden-when-fullscreen">
                <a href="/" class="">Home</a>
                <div class="buttons-container clearfix">
                    <a href="#" class="button toppanel" data-toppanel="title">Title</a>

                    <a href="#" class="button toppanel" data-toppanel="quick-reference">Quick
                        Reference</a>
                    <a href="#" class="button toppanel" data-toppanel="about">Upload</a>
                    <a href="#" class="button toppanel"
                       data-toppanel="settings">Settings</a>
                    <a href="#" class="button icon-fullscreen feature"
                       data-feature="fullscreen"
                       data-tofocus="markdown" title="Go fullscreen"></a>
                </div>
            </div>

            {{ form.body }}
            {% csrf_token %}

        </div>
    </div>
    <div id="right-column">
        <div class="wrapper">
            <div class="topbar hidden-when-fullscreen">
                <div class="buttons-container clearfix">
                    <div class="button-group">
                        <a href="http://markdown.pioul.fr/#" class="button switch" data-switchto="html">HTML</a>
                        <a href="http://markdown.pioul.fr/#" class="button switch active"
                           data-switchto="preview">Preview</a>
                    </div>
                    <a href="http://markdown.pioul.fr/#" class="button icon-sync-scroll feature"
                       data-feature="sync-scroll"
                       title="Toggle sync-scrolling (when enabled, the preview panel will automatically scroll with the left panel)"></a>
                    <a href="http://markdown.pioul.fr/#" class="button icon-fullscreen feature"
                       data-feature="fullscreen"
                       data-tofocus="" title="Go fullscreen"></a>
                    <!-- data-tofocus is set dynamically by the HTML/preview switch -->
                </div>
            </div>
            <div class="bottom-bar hidden-when-fullscreen clearfix">
                <div class="word-count"></div>
            </div>
            <textarea id="html" class="full-height" style="height: 595px; display: none;"></textarea>
            <div id="preview" class="full-height" style="height: 595px; display: block;"></div>
        </div>
    </div>
    <div class="topbar visible-when-fullscreen">
        <div class="buttons-container clearfix">
            <div class="button-group">
                <a href="http://markdown.pioul.fr/#" class="button switch" data-switchto="markdown">Markdown</a>
                <a href="http://markdown.pioul.fr/#" class="button switch" data-switchto="html">HTML</a>
                <a href="http://markdown.pioul.fr/#" class="button switch active" data-switchto="preview">Preview</a>
            </div>
            <a href="http://markdown.pioul.fr/#" class="button icon-fullscreen feature" data-feature="fullscreen"
               title="Exit fullscreen"></a>
        </div>
    </div>
    <div class="bottom-bar visible-when-fullscreen clearfix">
        <div class="word-count"></div>
    </div>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-8885785-17']);
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>

    <div class="sogoutip" style="z-index: 2147483645; visibility: hidden; display: none;"></div>
    <div class="sogoubottom" id="sougou_bottom" style="display: none;"></div>
    <div id="ext_stophi" style="z-index: 2147483647;">
        <div class="extnoticebg"></div>
        <div class="extnotice"><h2>关闭提示 <a href="http://markdown.pioul.fr/#" title="关闭提示" id="closenotice"
                                           class="closenotice">关闭</a></h2>
            <p id="sogouconfirmtxt"></p>  <a id="sogouconfirm" href="http://markdown.pioul.fr/#" class="extconfirm">确
                认</a>
            <a id="sogoucancel" href="http://markdown.pioul.fr/#" class="extconfirm">取 消</a></div>
    </div>
    <div id="ext_overlay" class="ext_overlayBG" style="display: none; z-index: 2147483646;"></div>
    <iframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src="/static/yun6.html"
            style="border: none; display: none; height: 84px; width: 100%; z-index: 2147483645; background: transparent;"></iframe>
</form>
</body>
</html>